<template>
  <!--所有元素，都不能直接放在根节点下-->
  <div>
    <h1>个人信息</h1>
    {{id}}
<!--    {{$route.params.id}}-->
  </div>
</template>

<script>
    export default {
      props:['id'],
      name: "UserProfile",
      //过滤器
      beforeRouteEnter: (to, from, next)=>{
        console.log("路由进入之前");
        //加载数据
        next(vm =>{
          vm.getData();//路由进入之前执行getData()
        });
      },
      beforeRouteLeave: (to, from, next)=>{
        console.log("路由离开之前");
        next();
      },
      methods: {
        getData: function() {
          this.axios({
            method: 'get',
            url: 'http://localhost:8084/static/mock/data.json'
          }).then(function (response) {
            console.log(response);
          })
        }
      }
    }
</script>

<style scoped>

</style>
